<template>
  <div class="page-city">
    <div class="page-city__header">当前城市 - 深圳</div>

    <div class="page-city__search">
      <input type="text" placeholder="请输入城市名或拼音" />
    </div>

    <div class="body" ref="body">
      <div class="page-city__box">
        <div class="title">热门城市</div>
        <div class="section">
          <div class="hot">北京</div>
          <div class="hot">北京</div>
          <div class="hot">北京</div>
          <div class="hot">北京</div>
        </div>
      </div>

      <div class="group" v-for="group in list" :key="group.groupName">
        <!-- <div class="group-title" :id="group.groupName">{{ group.groupName }}</div> -->

        <div class="group-title" :ref="group.groupName">{{ group.groupName }}</div>
        <div class="group-list">
          <div class="city" v-for="city in group.groupList" :key="city.cityId">
            {{ city.name }}
          </div>
        </div>
      </div>
    </div>

    <div class="indexs">
      <!-- <a class="index" v-for="item in indexList" :key="item" :href="`#${item}`">
        {{ item }}
      </a> -->

      <div class="index" v-for="item in indexList" :key="item" @click="jump(item)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      cities: [] // 用于存放接口返回的城市列表
    }
  },

  computed: {
    list() {
      // 定义一个最终结果集合
      let result = []
      // 遍历 cities 做分组
      this.cities.forEach((city) => {
        // 1. 取出当前 city 的 拼音首字母
        const py = city.pinyin[0].toUpperCase()
        // console.log('py', py)

        // 2. 获取当前 py 在 result 数组中的下标
        const index = result.findIndex((item) => item.groupName === py)

        // 3. 判断 index 是否存在
        if (index !== -1) {
          // 找到了, 将当前城市追加到 对应的 group 对象的 groupList 中
          result[index].groupList.push(city)
        } else {
          // 没找到，将当前城市写入到 result 中
          result.push({
            groupName: py,
            groupList: [city]
          })
        }
      })

      // console.log('result', result)
      // 排序
      // const tmp = result.sort((a, b) => {
      //   if (a.groupName > b.groupName) {
      //     return 1
      //   } else {
      //     return -1
      //   }
      // })

      const tmp = result.sort((a, b) => (a.groupName > b.groupName ? 1 : -1))

      console.log('tmp', tmp)
      // 返回排序之后的数据
      return tmp
    },

    indexList() {
      return this.list.map((item) => item.groupName)
    }
  },

  methods: {
    refresh() {
      axios
        .get('https://m.maizuo.com/gateway', {
          headers: {
            'X-Host': 'mall.film-ticket.city.list'
          }
        })
        .then(({ data }) => {
          // console.log('data', data)
          if (data.status !== 0) {
            // 业务状态码失败
            console.error('请求失败', data.msg)
            return
          }

          this.cities = data.data.cities
          // console.log('this.cities', this.cities)
        })
    },

    jump(py) {
      // 1. 找到 py 对应的 id 元素
      const el = this.$refs[py][0]

      console.log('el', el)

      // 2. 计算它的 offsetTop
      const top = el.offsetTop
      // 3. 修改 .body 元素的 scrollTop
      // document.querySelector('.body').scrollTop = top

      this.$refs.body.scrollTo({
        top: top,
        behavior: 'smooth'
      })

      return

      // ======

      // 1. 找到 py 对应的 id 元素
      // const el = document.querySelector(`#${py}`)

      // // 2. 计算它的 offsetTop
      // const top = el.offsetTop
      // // 3. 修改 .body 元素的 scrollTop
      // // document.querySelector('.body').scrollTop = top

      // document.querySelector('.body').scrollTo({
      //   top: top,
      //   behavior: 'smooth'
      // })
    }
  },

  created() {
    this.refresh()
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  height: 100%;
}

.page-city {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.body {
  position: relative;
  flex: 1;
  overflow-y: auto;
}

.page-city__box {
  background-color: #ccc;
}

.section {
  display: flex;
}

.hot {
  flex: 1;
  text-align: center;
  border: 1px solid #000;
  margin: 10px;
}

.group-title {
  padding-left: 10px;
  height: 36px;
  line-height: 36px;
  background-color: #ddd;
}

.city {
  padding-left: 20px;
  height: 36px;
  line-height: 36px;
  border-bottom: 1px solid green;
}

.indexs {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.index {
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  background-color: green;
}
</style>
